// =======================
//  Vite 配置（Chrome 扩展）
//  入口 html：根目录（dashboard.html / popup.html / options.html）
//  manifest.json：根目录
//  public/：只放静态资源（图标、图片、字体）
// =======================

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

// -----------------------
//  导出配置
// -----------------------
export default defineConfig({
    // ---------------------
    //  插件：React + CRX
    // ---------------------

    // 使用 React 插件（自动 JSX 运行时）
    // 说明：无需 import React；HMR 快
    plugins: [
        // React插件：支持JSX和Fast Refresh，使用现代化自动JSX运行时
        react({
            // 使用自动 JSX 运行时
            jsxRuntime: 'automatic',
        }),
        // 使用 CRX 插件（以根目录 manifest.json 为源）
        crx({ manifest }),
    ],

    // ---------------------
    //  路径别名
    // ---------------------

    // 设置路径别名
    resolve: {
        // 定义常用别名
        alias: {
            // 根目录 src
            '@': path.resolve(__dirname, './src'),
            // 组件目录
            '@/components': path.resolve(__dirname, './src/components'),
            // 工具库
            '@/lib': path.resolve(__dirname, './src/lib'),
            // Hooks
            '@/hooks': path.resolve(__dirname, './src/hooks'),
            // 状态
            '@/stores': path.resolve(__dirname, './src/stores'),
            // 类型
            '@/types': path.resolve(__dirname, './src/types'),
            // 页面
            '@/pages': path.resolve(__dirname, './src/pages'),
        },
    },

    // ---------------------
    //  构建配置
    // ---------------------

    // 构建（生产）配置
    build: {
        // 指定输出目录
        outDir: 'dist',
        // 构建前清空输出目录
        emptyOutDir: true,
        // 非生产环境保留源码映射
        sourcemap: process.env.NODE_ENV !== 'production',
        // 目标 JS 版本
        target: 'es2020',
        // 压缩器（terser/esbuild）；terser 功能更全但慢
        minify: 'terser',

        // 多页面入口
        // 说明：仅声明 HTML 入口；后台脚本、内容脚本由 manifest 与 import 图谱决定
        rollupOptions: {
            // 指定多页面入口
            input: {
                // 仪表盘页面
                dashboard: path.resolve(__dirname, 'dashboard.html'),
                // 弹窗页面
                popup: path.resolve(__dirname, 'popup.html'),
                // 设置页面
                options: path.resolve(__dirname, 'options.html'),
            },

            // 输出选项
            // 说明：尽量不要强改 entryFileNames，以免干扰 CRX 插件生成路径
            output: {
                // 静态资源命名
                assetFileNames: 'assets/[name]-[hash][extname]',
                // 代码分割产物命名
                chunkFileNames: 'chunks/[name]-[hash].js',
            },
        },
    },

    // ---------------------
    //  开发服务器（仅给 HMR 用）
    // ---------------------

    // 开发服务器配置
    server: {
        // 开放端口
        port: 3000,
        // 允许外部访问
        host: true,
        // HMR 设置
        hmr: { port: 3001 },
        // 文件系统白名单（可选）
        fs: { allow: ['..'] },
        strictPort: true,
        // 告诉浏览器这就是 dev 资源的“绝对来源”，部分场景更稳
        origin: 'http://localhost:3000',
        // 打开 CORS，并显式加响应头（对 chrome-extension 源生效）
        cors: true,
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Headers': '*'
        }
    },

    // ---------------------
    //  全局常量
    // ---------------------

    // 定义全局常量
    define: {
        // 是否为开发模式
        __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
    },

    // ---------------------
    //  依赖预构建
    // ---------------------

    // 预构建依赖
    optimizeDeps: {
        // 常用依赖
        include: ['react', 'react-dom', 'zustand', 'react-hook-form'],
    },
})
